<!DOCTYPE html>
<html>

<head>
    <title>使用地图切换动画</title>
    <link rel="stylesheet" href="../include/ol.css" type="text/css">
    <script src="../include/ol.js"></script>
</head>

<body>
    <button id="rotate-left" title="顺时针旋转">↻</button>
    <button id="rotate-right" title="逆时针旋转">↺</button>
    <button id="pan-to-london">平移到伦敦</button>
    <button id="elastic-to-moscow">弹性平移到莫斯科</button>
    <button id="bounce-to-istanbul">弹跳平移到伊斯坦布尔</button>
    <button id="spin-to-rome">旋转平移到罗马</button>
    <button id="rotate-around-rome">绕着罗马旋转</button>
    <button id="fly-to-bern">飞行到伯尔尼</button>
    <button id="tour">来一段旅行</button>
    <div id="map"></div>
    <script>
        var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
        var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
        var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
        var rome = ol.proj.fromLonLat([12.5, 41.9]);
        var bern = ol.proj.fromLonLat([7.4458, 46.95]);

        var view = new ol.View({
            center: istanbul,
            zoom: 6
        });

        var gaodeMapLayer = new ol.layer.Tile({
            // preload: 6,
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
            })
        });

        var map = new ol.Map({
            layers: [gaodeMapLayer],
            loadTilesWhileAnimating: true,
            view: view,
            target: 'map'
        });

        function bounce(t) {
            var s = 7.5625;
            var p = 2.75;
            var l;
            if (t < (1 / p)) {
                l = s * t * t;
            } else {
                if (t < (2 / p)) {
                    t -= (1.5 / p);
                    l = s * t * t + 0.75;
                } else {
                    if (t < (2.5 / p)) {
                        t -= (2.25 / p);
                        l = s * t * t + 0.9375;
                    } else {
                        t -= (2.625 / p);
                        l = s * t * t + 0.984375;
                    }
                }
            }
            return l;
        }

        function elastic(t) {
            return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
        }

        function onClick(id, callback) {
            document.getElementById(id).addEventListener('click', callback);
        }

        onClick('rotate-left', function () {
            view.animate({
                rotation: view.getRotation() + Math.PI / 2
            });
        });

        onClick('rotate-right', function () {
            view.animate({
                rotation: view.getRotation() - Math.PI / 2
            });
        });

        onClick('pan-to-london', function () {
            view.animate({
                center: london,
                duration: 2000
            })
        });

        onClick('rotate-around-rome', function () {
            var rotation = view.getRotation();
            view.animate({
                rotation: rotation + Math.PI,
                anchor: rome,
                easing: ol.easing.easeIn
            }, {
                rotation: rotation + 2 * Math.PI,
                anchor: rome,
                easing: ol.easing.easeOut
            });
        });

        onClick('elastic-to-moscow', function () {
            view.animate({
                center: moscow,
                duration: 2000,
                easing: elastic
            });
        });

        onClick('bounce-to-istanbul', function () {
            view.animate({
                center: istanbul,
                duration: 2000,
                easing: bounce
            });
        });

        onClick('spin-to-rome', function () {
            var center = view.getCenter();
            view.animate({
                center: [
                    center[0] + (rome[0] - center[0]) / 2,
                    center[1] + (rome[1] - center[1]) / 2
                ],
                rotation: Math.PI,
                easing: ol.easing.easeIn
            }, {
                center: rome,
                rotation: 2 * Math.PI,
                easing: ol.easing.easeOut
            });
        });


        function flyTo(location, done) {
            var duration = 2000;
            var zoom = view.getZoom();
            var parts = 2;
            var called = false;
            function callback(complete) {
                --parts;
                if (called) {
                    return;
                }
                if (parts === 0 || !complete) {
                    called = true;
                    done(complete);
                }
            }
            view.animate({
                center: location,
                duration: duration
            }, callback);
            view.animate({
                zoom: zoom - 1,
                duration: duration / 2
            }, {
                zoom: zoom,
                duration: duration / 2
            }, callback);
        }

        onClick('fly-to-bern', function () {
            flyTo(bern, function () { });
        });

        onClick('tour', function(){
            var locations = [london, moscow, rome, bern, istanbul];
            var index = -1;
            function next(more){
                if(more){
                    ++index;
                    if(index<locations.length){
                        var delay = index==0?0:750;
                        setTimeout(function(){
                            flyTo(locations[index], next);
                        },delay);
                    }else{
                        alert("tour finished");
                    }
                }else{
                    alert("tour cancelled");
                }
            }

            next(true);
        })

    </script>
</body>

</html>